<%@page language="java" contentType="text/html; charset=UTF-8"%>
<html lang="en" xmlns:ext="http://www.extjs.com/docs">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ExtJS 3.2.0 API Documentation</title>
   <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/flow.js"></script>
<script type="text/javascript" src="check-tree.js"></script>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/examples/form/states.js"></script>
 	<script type="text/javascript" src="ext/examples/shared/examples.js"></script>
 	<script language="javascript" src="dwr/util.js"></script>
<script language="javascript" src="dwr/engine.js"></script>
 	<script type="text/javascript" src="dwr/interface/CshzmAjax.js"></script>
 	<script type="text/javascript" src="js/dwrproxy.js"></script>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<title>Ext Drag/Drop</title>
<style type="text/css"> 
.app-header .x-panel-body {
    background-color: #ddd;
    padding-left: 5px;
}
 
.app-header h1 {
    font-family: verdana,arial,sans-serif;
    font-size: 20px;
    color: #15428B;
}
 
.hospital-target {
    border: 1px solid red;
    width: 400ps;
    height: 16px;
    margin: 5px;
    padding: 5px;
}
 
.hospital-target.hospital-target-hover {
	height:200px;
	width:200px;
    background-color: #C0C0C0;
}
 
.patient-source {
    cursor: pointer;
}
 
.patient-view td {
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
}
 
td.patient-label {
    background-color: #c1fff8;
    border: 1px solid #bbb;
    text-align: center;
    font-size:13px;
    width: 100px;
    padding: 0px 3px 0px 0px;
}
 td.patient-name{
 
    font-size:13px;
   
 }
.patient-over {
    background-color:#EFEFEF;
    cursor: pointer;
}
.patient-selected {
    background-color: #DFE8F6;
    cursor: pointer;
}
</style>
</head>

<body> 
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --> 

<div id="div_bar"></div>

</html>
<script>


 var currentNodeId;
Ext.onReady(function() {
	var start = 0;
	var pageSize = 10;
    var PatientRecord = Ext.data.Record.create([ {
        name: 'name',
        mapping:'display_name'
    }]);
    var patientStore = new Ext.data.Store({
       proxy: new Ext.data.HttpProxy({url:'yhzzmbqb.do?theAction=getPortletXml'}), 
			reader: new Ext.data.XmlReader({ 
			record:'item', 
			id:'id',
			totalRecords: '1' 
			},[ {name: 'id', mapping:'id'},
			{name: 'name', mapping:'name'}
			]) 
       
    });

    patientStore.load({params : {
		
	},
	arg : [],
	   callback : function(records, options, success) {
	}

	   });
  
    var recordType = new Ext.data.Record.create([{
		name : 'id1',
		mapping : 'id',
		type : 'int'
	}, {
		name : 'name1',
		mapping : 'name',
		type : 'string'
	}, {
		name : 'portletname',
		mapping : 'portletname',
		type : 'string'
	}]);
    var proxy = new Ext.data.DWRProxy(CshzmAjax.getPersonalPortletLayout, true);
    var hospitalStore = new Ext.data.Store({
        proxy: proxy,
      reader : new Ext.data.ListRangeReader({
								id : 'id',
								totalProperty : 'totalSize'
							}, recordType)
        
    });



 var tree = new Ext.tree.TreePanel({
       el: 'div_bar',
       animate:true,
       autoScroll:true,
       border: false,
       //rootVisible:false,
       height: 300,
       width: 300,
   		 loader: new Ext.tree.TreeLoader({dataUrl: 'customform/out.jsp'})
    });
    var root = new Ext.tree.AsyncTreeNode({
        id: '0',
        text:'全校'
    });
    
 tree.on("click", function(node) {
	currentNodeId=node.id;
	 hospitalStore.load({
		params : {
			
			start : start,
			limit : pageSize
		},
		arg : [node.id],
		callback : function(records, options, success) {
		}
	});
           
        });
    tree.setRootNode(root);

    root.expand(false, false);
   


    var viewport = new Ext.Viewport({
        layout: 'border',
        
        items: [
        // create instance immediately
        new Ext.BoxComponent({
            region: 'north',
            height: 32, // give north and south regions a height
            autoEl: {
                tag: 'div',
                html:'<p style="font-size:13px	"><font color="red">主要功能介绍：按组维护用户前台首页栏目，固定每组用户显示四块，操作步骤如下：</font></p><p style="font-size:13px	"><font color="red">1.在左边的人员树中选中人员;</font></p><p style="font-size:13px	"><font color="red">2.将中间的栏目拖到右边的格子区域中;</font></p><p style="font-size:13px	"><font color="red">3.删除时点击要删除的栏目，单击删除按钮</font></p>'
            }
        }), 


       {
            region: 'west',
            id: 'west-panel', // see Ext.getCmp() below
            title: '人员列表',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [tree]
        },
        {
            region: 'center',
            title: '栏目列表',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            items: [ 
                    new Ext.DataView({
                tpl: '<tpl for=".">' +
                '<div class="patient-source"><table><tbody>' +
                    '<tr><td class="patient-label">名称</td><td class="patient-name">{name}</td></tr>' +
                '</tbody></table></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        overClass: 'patient-over',
        selectedClass: 'patient-selected',
        singleSelect: true,
        store: patientStore,
        listeners: {
            
            render: initializePatientDragZone
        }
    })
            ]
        },
       window.grid=       
        new Ext.grid.GridPanel({
            tbar:new Ext.Toolbar({
            	 items:[
		 				new Ext.Action({
		   				text: '删除',
		      			handler: function(){
		 					var selModel = grid.getSelectionModel();   
		 					    var sels =selModel.getSelections();   
		 					    var Ids = [];   
		 				    if (typeof(sels) != 'undefined') {   
		 				       for(var i = 0,len = sels.length; i < len; i++){   
		 				          Ids[i]=sels[i].data.id1;   
		 				       }    
								if( Ids.length==0)return false;
		 				       CshzmAjax.updatePersonalPortletLayout("", Ids[0],currentNodeId,function(flag){
			 						var strs =flag.split("||");
				 	                 if(strs[0]=="true"){
				 	                	hospitalStore.load({
				 	               		params : {
				 	               			
				 	               			start : start,
				 	               			limit : pageSize
				 	               		},
				 	               		arg : [currentNodeId],
				 	               		callback : function(records, options, success) {
				 	               		}
				 	               	});

					 	                 }else Ext.Msg.alert('提示', strs[1])});
		 				    }    
		 				   
		       						//Ext.Msg.alert('Click','You clicked on "Action 1".');
			 			},iconCls: 'blist'})
 						]}),
       	 region: 'east',
            title: '已选栏目列表',
            collapsible: true,
            split: true,
            width: 225, // give east and west regions a width
            minSize: 175,
            maxSize: 400,
            margins: '0 5 0 0',
            layout: 'fit', 
          
           columns: [
           {id:'id1',
           header:'编号',
           sortable: false,
           dataIndex : 'id1'
           }],
           autoExpandColumn: 'id1',
           
           viewConfig: {
               tpl: new Ext.XTemplate('<div  class="hospital-target">{portletname}</div>'),
               enableRowBody: true,
               getRowClass: function(rec, idx, p, store) {
                   p.body = this.tpl.apply(rec.data);
               }
           },
           itemSelector: 'div.hospital-target',
           store: hospitalStore,
           listeners: {	
					render:initializeHospitalDropZone
           },
           bbar : new Ext.PagingToolbar({
				pageSize : 10,
				store : hospitalStore,
				displayInfo : true,
				displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
				emptyMsg : "没有记录",
				prevText : "上一页",
				nextText : "下一页",
				refreshText : "刷新",
				lastText : "最后页",
				firstText : "第一页",
				beforePageText : "当前页",
				afterPageText : "共{0}页"
			})
       })
        ]
    });
});


function initializePatientDragZone(v) {
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {

        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    id:v.getRecord(sourceEl),
                    patientData: v.getRecord(sourceEl).data
                }
            }
        },

        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}


function initializeHospitalDropZone(g) {
    g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {

        getTargetFromEvent: function(e) {
            return e.getTarget('.hospital-target');
        },

        onNodeEnter : function(target, dd, e, data){ 
            Ext.fly(target).addClass('hospital-target-hover');
        },

        onNodeOut : function(target, dd, e, data){ 
            Ext.fly(target).removeClass('hospital-target-hover');
        },

        onNodeOver : function(target, dd, e, data){ 
            return Ext.dd.DropZone.prototype.dropAllowed;
        },
        onNodeDrop : function(target, dd, e, data){
            var rowIndex = g.getView().findRowIndex(target);
            var h = g.getStore().getAt(rowIndex);
            var targetEl = Ext.get(target);
             CshzmAjax.updatePersonalPortletLayout(data.id.id,h.id,currentNodeId,function(flag){
					var strs =flag.split("||");
                 if(strs[0]=="true"){targetEl.update(data.patientData.name);}else Ext.Msg.alert('提示', strs[1])});
            return true;
        }
    });
}

</script>
